<template>
  <div class="page">
    <h3>基本信息</h3>
    <detail-table
      :list="baseInfo"
      :info="form.basicInfo && form.basicInfo"
    ></detail-table>
    <!-- 包场单/实物单不显示产品信息 -->
    <div v-if="!['4', '6', '7'].includes(form.basicInfo.orderTypeId)">
      <h3>产品信息</h3>
      <detail-table
        :list="productInfo"
        :info="form.productInfo && form.productInfo"
      ></detail-table>
    </div>

    <!-- 包场规则 旧数据 isNew === 0-->
    <div class="mt20 detail-table" v-if="form.basicInfo.orderTypeId === '4' && form.basicInfo.isNew === '0'">
      <div v-for="(item, index) in form.basicInfo.bookRule" :key="index">
        <div class="mtb20 fb">{{'基础规则' + (index + 1)}}</div>
        <table cellspacing="0" cellpadding="0">
          <tr v-for="(item1, index1) in cinemaInfoList" :key="index1" class="wp50">
            <template>
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'cinemaType'" class="vm lh30">
                  {{ item['cinemaData']['relationType'] === '-1' ? '全部影院' : item['cinemaData']['relationType'] === '2' ? '指定影院' : '指定分组' + '--' + item['cinemaData']['relationName']}}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <span v-if="item1.type === 'filmName'" class="vm lh30">
                  {{ item[item1.type] || '--'}}
                </span>
                <span v-if="item1.type === 'url'" class="vm lh30">
                  <a href="javascript:;" class="text-primary" @click="onCinemaDetail(item, index)" v-if="item['cinemaData']['relationId'] !== '-1'">
                    点击查看
                  </a>
                  <span v-else>--</span>
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </template>
          </tr>
        </table>
      </div>
    </div>
    <!-- 包场规则 新数据 isNew === 1-->
    <div class="mt20 detail-table" v-if="form.basicInfo.orderTypeId === '4' && form.basicInfo.isNew === '1'">
      <div v-for="(item, index) in form.basicInfo.bookRule.rule" :key="index">
        <div class="mtb20 fb">{{'基础规则' + (index + 1)}}</div>
        <table cellspacing="0" cellpadding="0">
          <tr v-for="(item1, index1) in cinemaInfoList" :key="index1" class="wp50">
            <template>
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'cinemaType'" class="vm lh30">
                  {{ form.basicInfo.bookRule['cinemaData']['relationType'] === '-1' ? '全部影院' : form.basicInfo.bookRule['cinemaData']['relationType'] === '2' ? '指定影院' : '指定分组' + '--' + form.basicInfo.bookRule['cinemaData']['relationName']}}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <span v-if="item1.type === 'filmName'" class="vm lh30">
                  {{ item[item1.type] || '--'}}
                </span>
                <span v-if="item1.type === 'url'" class="vm lh30">
                  <a href="javascript:;" class="text-primary" @click="onCinemaDetail(form.basicInfo.bookRule['cinemaData']['relationId'])" v-if="form.basicInfo.bookRule['cinemaData']['relationId'] !== '-1'">
                    {{form.basicInfo.bookRule['cinemaData']['relationName']|| '--'}}
                  </a>
                  <span v-else>--</span>
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </template>
          </tr>
        </table>
      </div>
    </div>

    <!-- 实物规则 -->
    <div class="mt20 detail-table" v-if="form.basicInfo.orderTypeId === '6'">
      <h3>商品信息</h3>
      <el-table :data="form.productInfo" border class="wp100 mb10">
        <el-table-column prop="name" align="center" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="minSalePrice" align="center" label="最低销售单价" width="180">
        </el-table-column>
        <el-table-column prop="number" align="center" label="数量">
        </el-table-column>
        <el-table-column prop="price" align="center" label="商品单价(元)">
        </el-table-column>
        <el-table-column prop="deliveryMoney" align="center" label="运费">
        </el-table-column>
        <el-table-column prop="totalPrice" align="center" label="商品总额">
        </el-table-column>
      </el-table>
    </div>

    <!-- 文旅销售单 -->
    <div class="mt20 detail-table" v-if="form.basicInfo.orderTypeId === '7'">
      <div v-for="(item, index) in form.wenlvRule.list" :key="index">
        <div class="mtb20 fb">{{'基础规则' + (index + 1)}}</div>
        <table cellspacing="0" cellpadding="0">
          <span v-for="(item1, index1) in wenlvInfoList" :key="index1">
            <tr class="vm wp50" v-if="!(+item.calculationMethod === 2 && ['unitPrice', 'joinCount'].includes(item1.label))">
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </tr>
          </span>
        </table>
      </div>
    </div>

    <div
      v-if="
        form.productInfo.productTypeId === '3' &&
          form.productInfo.isCustomize === '1'
      "
      class="mt20"
    >
      <zm-table-data
        :data="form.productInfo.customizePrice"
        :columns="columns"
        :show-page="false"
      ></zm-table-data>
    </div>
    <div v-if="form.basicInfo && form.basicInfo.isActive === '1' && obj.isClose === '0' && !['6', '7'].includes(form.basicInfo.orderTypeId)">
      <!-- 开启实物的 产品激活配置 -->
      <h3>产品激活配置</h3>
      <detail-table :list="activeInfo" :info="form.activeInfo"></detail-table>
    </div>

    <detail-container
      v-if="extendDetailParams.visible"
      v-model="extendDetailParams.visible"
      :id="extendDetailParams.id"
      :business-id="extendDetailParams.id"
      :is-show-btn="false"
      :type="extendDetailParams.type"
    >
    </detail-container>
    <!-- 影城 -->
    <cinema-detail v-if="cinemaParams.visible" v-model="cinemaParams.visible" :id="cinemaParams.id" :obj="cinemaParams.obj" :is-new="cinemaParams.isNew" :idx="cinemaParams.idx"></cinema-detail>
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import DetailTable from '@/components/zmDetailTable'
import DetailContainer from '@/components/DetailContainer'
import { base, product, active, wenlv, customizePriceColumns, cinemaInfoList } from './const'
import { getActiveDetail, editFile } from '@/api/src/saleOrder'
import CinemaDetail from './CinemaDetail'
import uploadApis from '@/api/src/upload'

export default {
  name: 'ProductActivationInfo',
  components: {
    DetailTable,
    DetailContainer,
    CinemaDetail
  },
  mixins: [tableMixin],
  props: {
    obj: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      base,
      product,
      active,
      wenlv,
      cinemaInfoList,
      form: {
        basicInfo: {},
        productInfo: {},
        activeInfo: {}
      },
      extendDetailParams: {
        visible: false,
        id: '',
        type: '',
        obj: {}
      },
      cinemaParams: {
        visible: false,
        isNew: '0',
        id: '',
        obj: {},
        idx: 0
      }
    }
  },
  computed: {
    baseInfo () {
      return base(this)
    },
    productInfo () {
      return product(this)
    },
    activeInfo () {
      return active(this)
    },
    wenlvInfoList () {
      return this.wenlv(this)
    },
    columns () {
      return customizePriceColumns(this)
    }
  },
  created () {
    console.log('dataInfo-', this.obj.id)
    this.getInfo()
  },
  methods: {
    async getInfo () {
      const res = await getActiveDetail({ id: this.obj.id })
      this.form = Object.assign({}, this.form, res)
      this.$emit('getDefaultData', res.basicInfo)
      this.$emit('getWholeData', res)
    },
    loadList () {},
    async fileUpload (data) {
      let params = new FormData()
      params.append('fileData', data.file)
      const res = await uploadApis.uploadFile(params)
      const _data = {
        orderId: this.obj.id,
        enclosureUrl: res.url,
        enclosureUrlName: res.name
      }
      await editFile(_data)
      // this.$emit('after-detail')
      this.getInfo()
      return res.url
    },
    onExtendShow (id, type) {
      this.extendDetailParams = {
        visible: true,
        id: id,
        businessId: id,
        type: type
      }
    },
    onExport () {
      if (!this.form.basicInfo.enclosureUrl) {
        this.$message.warning('没有找到下载的资料,确认是否有上传')
        return
      }
      const a = document.createElement('a') // 创建a标签
      a.setAttribute('download', '')// download属性
      a.setAttribute('href', this.form.basicInfo.enclosureUrl)// href链接
      a.click()// 自执行点击事件
    },
    onCinemaDetail (item, index) {
      // 查看影院信息
      console.log(item, this.form.basicInfo.isNew, 'gjgjgjgj')
      this.cinemaParams = {
        visible: true,
        isNew: this.form.basicInfo.isNew,
        id: this.form.basicInfo.isNew === '1' ? item : '',
        obj: this.form.basicInfo.isNew === '0' ? item.cinemaData : {},
        idx: index
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-form-item {
  width: 50%;
}
.el-form-item__label {
  background: #ccc !important;
}

$color: #fafafa;
$height: 40px;
.detail-table {
  table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-right: none;
    tr {
      display: inline-block;

      td {
        border-bottom: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        padding: 0 10px;
      }
    }
  }
  &__name {
    // height: $height;
    background: $color;
    text-align: center;
    width: 200px;
    display: inline-block;
    min-height: $height;
    line-height: 40px;
    &__icon {
      left: 10px;
    }
  }
  &__value {
    width: calc(100% - 205px);
    display: inline-block;
    min-height: $height;
    line-height: 30px;
  }
}
</style>
